<template>
  <k-form-modal
    ref="formRef"
    drawer
    width="649px"
    title="编辑"
    label-width="80px"
    v-bind="formModalState"
    v-on="formModalEvent"
  >
    <div class="title">赠送会员</div>
    <el-form-item label="昵称" prop="nick_name">
      <el-input v-model="state.model.nick_name" disabled placeholder="请输入用户昵称" />
    </el-form-item>
    <el-form-item label="手机号" prop="mobile">
      <el-input v-model="state.model.mobile" disabled placeholder="请输入手机号" />
    </el-form-item>
    <el-form-item label="会员类型" prop="vip_level">
      <el-input v-if="state.model.vip_level === -1" disabled placeholder="" />
      <el-select v-else v-model="state.model.vip_level" disabled placeholder="不限" style="width: 100%">
        <el-option
          v-for="item in vipLevelOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="到期时间" prop="vip_expire_time" :rules="[{ required: true, message: '请选择到期时间' }]">
      <el-date-picker
        v-model="state.model.vip_expire_time"
        style="width: 100%"
        type="date"
        :disabled-date="disabledDate"
        :shortcuts="dateShortcuts"
        placeholder="请选择到期时间"
        @change="dateChange"
      />
    </el-form-item>
    <el-form-item label="">
      <div class="quick-box">
        <div v-for="item in quickDateMap" :key="item.value" class="item" @click="handleClickQuickDateItem(item)">{{ item.label }}</div>
      </div>
    </el-form-item>
  </k-form-modal>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { useFormModal } from '@crud/index';
import { userExtend } from '@/api/crm-dyj/user';
import { vipLevelOptions, quickDateMap } from '../hooks/use-table';
import { toolGetSingleDateShortCuts as dateShortcuts } from '@/utils';
import dayjs from 'dayjs';
defineOptions({ name: 'MajorCustomerEditModal' });

const formRef = ref();
const emits = defineEmits(['after-submit']);

const disabledDate = (time: Date) => {
  return time.getTime() < Date.now();
};
const cachedData = ref();
const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  formRef,
  model: {
    mobile: undefined,
    vip_level: 15
  },
  getParams: (model: any) => model,
  onShow: (mode = 0, data: any) => {
    state.model = { ...data, vip_expire_time: data.vip_expire_time && data.vip_expire_time * 1000 };
    if (data.vip_level === undefined || data.vip_level === 99) state.model.vip_level = -1;
    cachedData.value = data;
  },
  onSubmit: async (model: any, mode = 0) => {
    const { mobile, vip_expire_time } = model;
    const params = {
      mobile,
      end_time: dayjs(vip_expire_time).unix()
    };
    const res = await userExtend(params);
    if (!res.err) {
      ElMessage.success('编辑成功');
      emits('after-submit');
    }
    return res;
  }
});
const dateChange=(val: any) => {
  if (val) {
    state.model.vip_expire_time = dayjs(val).format('YYYY-MM-DD') +' ' + dayjs().format('HH:ss:mm');
  }
};
/** 点击快速快速选择日期的选项的时候触发 */
const handleClickQuickDateItem = (item: any) => {
  const { value } = item;
  const [val, unit] = value;
  const cachedEndTme = cachedData.value.vip_expire_time ?? 0;

  const currentDate = dayjs().unix().valueOf();
  /** 如果到期时间已经是过期（小于今天0点，则是按过期处理），日期按当天处理（传undefined） */
  const validDate = cachedEndTme < currentDate ? undefined : cachedEndTme * 1000;
  const newDate = dayjs(validDate).add(val, unit).valueOf();
  state.model.vip_expire_time = newDate;
  if (state.model.vip_level === -1) state.model.vip_level = 0;
};
defineExpose({
  show: methods.show
});
</script>
<style lang="scss" scoped>
.quick-box {
  display: flex;
  flex-wrap: wrap;

  .item {
    box-sizing: border-box;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 26px;
    padding: 0 12px;
    margin: 0 6px 0 0;
    cursor: pointer;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    transition: border-color .3s ease;

    &:hover {
      border-color: #f1f1f1;
    }
  }
}

.title {
  margin-bottom: 20px;
}
</style>
